<template>
  <div>
    <el-card shadow="hover" class="box-card">
      <div slot="header" class="clearfix">
        <span>Shortcut</span>
      </div>
      <router-link v-for="row in shortcuts" :key="row.key" :to="{path: row.router }">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper" :class="row.class">
            <svg-icon :icon-class="row.icon" class-name="card-panel-icon" />
          </div>
        </div>
      </router-link>
    </el-card>
  </div>
</template>

<script>
const defaultShortcuts = [
  {
    key: 1,
    name: 'Fragment',
    icon: 'fragment',
    router: '/resource/fragment/create',
    class: 'icon-shopping'
  },
  {
    key: 2,
    name: 'Online Tool',
    icon: 'tool',
    router: '/online-tool/list',
    class: 'icon-money'
  },
  {
    key: 3,
    name: 'Memory Space',
    icon: 'net-disk',
    router: '/memory-space/list',
    class: 'icon-people'
  },
  {
    key: 4,
    name: 'Account',
    icon: 'lock1',
    router: '/account/list',
    class: 'icon-message'
  },
  {
    key: 5,
    name: 'Topic',
    icon: 'topic',
    router: '/topic/list',
    class: 'icon-money'
  },
  {
    key: 6,
    name: 'Interview',
    icon: 'interview-question',
    router: '/resources/interview-question/list',
    class: 'icon-people'
  },
  {
    key: 7,
    name: 'Upload',
    icon: 'upload',
    router: '/online-tool/upload',
    class: 'icon-money'
  }
]

export default {
  name: 'Shortcut',
  data() {
    return {
      shortcuts: []
    }
  },
  created() {
    this.shortcuts = [...defaultShortcuts]
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.card-panel {
  cursor: pointer;

  &:hover {
    .card-panel-icon-wrapper {
      color: #fff;
    }
    .icon-people {
      background: #40c9c6;
    }
    .icon-message {
      background: #36a3f7;
    }
    .icon-money {
      background: #f4516c;
    }
    .icon-shopping {
      background: #c08810;
    }
  }

  .icon-people {
    color: #40c9c6;
  }
  .icon-message {
    color: #36a3f7;
  }
  .icon-money {
    color: #f4516c;
  }
  .icon-shopping {
    color: #c08810;
  }

  .card-panel-icon-wrapper {
    float: left;
    //   margin: 14px 0 0 14px;
    padding: 16px;
    transition: all 0.38s ease-out;
    border-radius: 6px;
  }

  .card-panel-icon {
    //   float: left;
    font-size: 48px;
  }
}
</style>
